<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

const chatVisible = ref(false)
const width = ref(0) // 初始宽度
const height = ref(0) // 初始高度

const toggleChat = () => {
  event.stopPropagation() // 阻止事件冒泡
  chatVisible.value = !chatVisible.value
}
const handleClickOutside = (event) => {
const chatWindow = document.querySelector('.chat-window')
  if (chatWindow && !chatWindow.contains(event.target)) {
    chatVisible.value = false
  }
}

// 处理调整大小事件
const handleResize = (x, y, newWidth, newHeight) => {
  width.value = newWidth
  height.value = newHeight
}

onMounted(() => {
  window.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  window.removeEventListener('click', handleClickOutside)
})
</script>
<template>
  <div class="ai-assist">
    <!-- AI按钮 -->
   
      <div class="chat-button" @click="toggleChat">
        <img src="@/assets/ai.png"/>
      </div>
     <vue-draggable-resizable
  :w="width"
  :h="height"
  :resizable="true"
  :draggable="true"
  @resizing="handleResize"
  @dragging="handleDragging"
>
  <transition name="fade">
    <div v-if="chatVisible" class="chat-window">
      <div class="chat-header">
        <span>白 蚁 智 能 问 答</span>
      </div>
      <div class="chat-body">
        <iframe src="https://www.doubao.com/chat/" frameborder="0"></iframe>
      </div>
    </div>
  </transition>
</vue-draggable-resizable>
  </div>
</template>
<style lang="scss" scoped>
.ai-assist {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99999;

.chat-button {
  background-color: #ffffff69;
  position: fixed;
  bottom: 60px;
  right: 40px;
  z-index: 10000;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;

  &:hover {
    transform: scale(1.1);
  }

  img {
    width: 60px;
    height: 60px;
    display: block;
  }
}

.chat-window {
  position: absolute;
  bottom: 30px;
  right: 115px;
  z-index: 10000;
  width: 550px;
  height: 550px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;

  .chat-header {
    background-color: #91bfee;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #91bfee;

    span {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .chat-body {
    padding: 15px;
    height: 88%;
    overflow-y: auto;
    background-color: #f9fafc;
    border-top: 1px solid #ddd;

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
}
}
</style>
